GuideLine簡介

GuideLine在Android Studio是一個基準線的概念，在activity上面先設定基準線，之後再將Layout或是物件依靠在那條基準線上即可。
需要這樣設置的原因是可以在不同裝置的解析度下持續正常運作，畫面不會因此偏離顯示螢幕的效果。
我先放上其他專案的demo圖給各位看

GuideLine物件簡述

這個物件所在位置在於Helpers裡面，一樣有著水平方向與垂直方向兩個，使用時只需要將其拉入Component Tree，完成之後轉到Split看一下程式碼並修改一些參數。

app:layout_constraintGuide_percent="輸入百分比數值";  

• 這個所使用的格式是浮點數float，所以只需要輸入自己想要的對應位置就好了以下說明對應意義。

  • 這個雙引號裡面輸入0.01可以作為畫面水平或垂直方向的 的位置，依此類推一直到1，如果輸入超過1就已經是超出螢幕比例範圍了，所以一般來說不會超出1。
  • 理所當然也能輸入0.001作為 當作對應位置。

• 底下還有另外兩個，他們所代表的是開頭以及結尾，也就是垂直方向的GuideLine是代表上方與下方，水平方向的GuideLine則是代表左邊和右邊。

  • layout_constraintGuide_begin：vertical左邊、horizontal頂部
  • layout_constraintGuide_end：vertical右邊、horizontal底部

app:layout_constraintGuide_begin="輸入數值";
app:layout_constraintGuide_end="輸入數值";

• 這個使用的格式是dimension，需要輸入單位量詞來指定到是從begin或是從end算過來的多少位置距離。

GuideLine程式碼

<!-- vertical GuideLine是從左至右、horizontal GuideLine是從上至下 -->

<!-- 從最一開始的地點開始，也就是從左邊或是從上面開始 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="25dp"/>

<!-- 從最後面開始，也就是從右邊或是從下面開始 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_end="100dp"/>

<!-- 百分比的GuideLine都是從頭開始，數值範圍在0~1 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25"/>

XML預覽圖

從這張圖可以看到有方向箭頭與百分比的圖示。

1. guideline2是垂直向的，也就是上圖的橫向的那條。
   • guideline2是使用begin，也就是從上面下來的第25dp的單位距離。
2. guideline3和guideline4是水平向的，也就是直向的兩條導覽線。
   • guideline3是使用end，也就是從右邊過來的第100dp單位距離。
   • 而guideline4是使用percent，也就是從左至右的 的位置。
3. 最後可以將工具依附在該條GuideLine上面
   • 在依附之前必須先將工具命名

   <!--
   裡面的名稱自訂，建議是以該工具所帶的功能去命名。
   例如：TextView是要顯示密碼，xxxxxx的地方就輸入password等等的名稱
   -->
   
   android:id = "@+id/xxxxxx"
   

對齊功能

• 說明1 _ 基本說明
  程式碼小解析：app:layout_constraintStart_toStartOf="@id/XXX"，前面的是綁在自身元件的某個面，有Top、Bottom、Start、End，這四種，若以四方型來說明其所在位置分別是在四方型的：頂部、底部、左、右。
• 說明2 _ 貼齊的位置說明
  以下方的程式碼為例子就是將這個元件的左邊貼齊(GuideLineA~C)，而GuideLine因為是一條輔助線沒有左右邊線的區別，所以toStartof和toEndof的效果是一樣的，Start與End兩個一組，Top與Bottom兩個一組，每個組別個有四個組合。
  • Top -> Bottom、代表程式碼(layout_constraintTop_toBottomOf)
  • Top -> Top、代表程式碼(layout_constraintTop_toTopOf)
  • Bottom -> Top、代表程式碼(layout_constraintBottom_toTopOf)
  • Bottom -> Bottom、代表程式碼(layout_constraintBottom_toBottomOf)
  • Start -> Start、代表程式碼(layout_constraintStart_toStartOf)
  • Start -> End、代表程式碼(layout_constraintStart_toEndOf)
  • End -> Start、代表程式碼(layout_constraintEnd_toStartOf)
  • End -> End、代表程式碼(layout_constraintEnd_toEndOf)
• 說明3 _ 相同的功能
  Start、End與Right、Left一樣的概念，對應位置就是End與Right一樣、Start與Left一樣，將上方的Start和End調換成Left和Right。
• 說明4 _ 對齊文字底部
  這個功能會用到後面學習的TextView設定，這邊只會先貼上對齊效果圖片。
• 說明5 _ 對齊的對象
  這個小節是說明app:layout_constraintStart_toStartOf="@id/XXX"的""的對齊對象，最基本可以是畫面上的元件名稱@id/XXX，或者是直接貼齊畫面邊框parent。
• 全部程式碼完整說明：
  app:layout_constraintStart_toStartOf="@id/XXX"就是在目前選擇元件的左邊對齊元件XXX的左邊。

<!-- 只要在元件的程式碼中加上這個對齊功能就好，是xml內建的 -->
app:layout_constraintStart_toStartOf="@id/guidelineA"
app:layout_constraintBottom_toBottomof="@id/guidelineB"
app:layout_constraintEnd_toEndOf="@id/guidelineC"

<!-- 對齊文字底線 -->
app:layout_constraintBaseline_toBaselineOf="@id/TextView001"

• GuideLine依附效果圖例1 - 基本的按鈕對齊GuideLine
  
• GuideLine依附效果圖例2 - 對齊文字底部功能
  

以上就是今天練習的部分